
.dw-user{
  position: relative;
  min-height: 100vh;
  padding: 32rpx;
  font-size: 28rpx;
  background: linear-gradient(to bottom, #FEFEFE 0%, #F5F5F5 100%);
  & > view {
    margin-bottom: 32rpx;
  }

  &-infos{
    display: flex;
    align-items: center;
    &-avatar{
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
      margin-right: 24rpx;
      flex: 0 0 auto;
    }
    &-body{
      flex: 1;
    }
    &-nickname{
      font-size: 32rpx;
      font-weight: 700;
    }
    &-title{
      margin-top: 8rpx;
      padding: 0 16rpx;
      height: 32rpx;
      display: inline-flex;
      align-items: center;
      border-radius: 20rpx;
      color: #666;
      font-size: 24rpx;
      background: rgba(200, 200, 200, .3);
    }
    &-extra{
      margin-left: 24rpx;
      flex: 0 0 auto;
    }
  }
  
  &-section{
    background: #FFF;
    padding: 32rpx;
    &.round{
      border-radius: 16rpx;
    }
    &-header{
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;
      &.border{
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #F5F5F5;
      }
      &-title{
        font-size: 32rpx;
        font-weight: 600;
      }
      &-extra{
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    &-body{
      
    }
  }

  &-navs{
    display: flex;
    margin-bottom: -24rpx;
    width: 100%;
    &.grid {
      display: grid;
      grid-column-gap: 24rpx;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      margin-bottom: 0; // 网格布局下使用 gap，所以重置 margin
      .dw-user-navs-item { // 网格布局下使用 gap，所以重置 margin
        margin-bottom: 0;
      }
      &.col3 {
        grid-template-columns: 1fr 1fr 1fr;
      }
      &.col4 {
      }
      &.col5 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }
    }
    &-item{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 24rpx;
      flex: 1;
      &.gapline{
        &::before{
          content: ' ';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 28rpx;
          background: #F5F5F5;
        }
      }
      &-badge{
        position: absolute;
        font-size: 18rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: #FFF;
        right: 0;
        top: 0;
        transform: translate(50%, -50%);
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        background: #F56C21;
      }
      &-icon{
        width: 64rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      &-title{
        margin-top: 12rpx;
      }
    }
  }


  
  &-list{
    font-size: 28rpx;
    &-item{
      display: flex;
      align-items: center;
      min-height: 88rpx;
      &-icon{
        width: 48rpx;
        height: 48rpx;
        flex: 0 0 auto;
        margin-right: 16rpx;
      }
      &-content{
        flex: 1;
      }
      &-extra{
        flex: 0 0 auto;
        margin-left: 16rpx;
        image{
          width: 24rpx;
          height: 24rpx;
          color: #FFF;
        }
      }
    }
    &-item + &-item{
      border-top: 1px dashed #efefef;
    }
  }
}